import React, { Component, Fragment } from 'react';
import { Card, Table, Divider, Modal } from 'antd';
import ajax from '../../utils/ajax';
import '../ui/ui.less';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address'
  },
  {
    title: 'Action',
    key: 'action',
    render: record => (
      <span>
        <a href="#Anchor-Props">Invite {record.name}</a>
        <Divider type="vertical" />
        <a href="#Anchor-Props">Delete</a>
      </span>
    )
  }
];

const mockColumns = [
  {
    title: 'id',
    key: 'id',
    dataIndex: 'id'
  },
  {
    title: '用户名',
    key: 'username',
    dataIndex: 'username'
  },
  {
    title: '性别',
    key: 'sex',
    dataIndex: 'sex',
    render(sex) {
      return sex === 1 ? '男' : '女';
    }
  },
  {
    title: '状态',
    key: 'state',
    dataIndex: 'state',
    render(state) {
      let config = {
        '1': '咸鱼一条',
        '2': '风华浪子',
        '3': '北大才子',
        '4': '百度FE',
        '5': '创业者'
      };
      return config[state];
    }
  },
  {
    title: '爱好',
    key: 'interest',
    dataIndex: 'interest',
    render(abc) {
      let config = {
        '1': '游泳',
        '2': '打篮球',
        '3': '踢足球',
        '4': '跑步',
        '5': '爬山',
        '6': '骑行',
        '7': '桌球',
        '8': '麦霸'
      };
      return config[abc];
    }
  },
  {
    title: '生日',
    key: 'birthday',
    dataIndex: 'birthday'
  },
  {
    title: '地址',
    key: 'address',
    dataIndex: 'address'
  },
  {
    title: '早起时间',
    key: 'time',
    dataIndex: 'time'
  }
];

export default class Basic extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mockData: [],
      selectedRowKeys: [],
      selectedItem: [],
      selectedCheckBoxRows: '',
      selectedRows: '',
      Pagination: {
        current: '1',
        pageSize: '10',
        pageSizeOptions: ['1', '5', '10', '30'],
        showQuickJumper: true,
        showSizeChanger: true
      }
    };
  }

  componentWillMount() {
    this.getDataList();
  }

  getDataList = () => {
    ajax.get('table/basic/list').then(res => {
      res.result.list.map((item, index) => {
        item.key = index;
      });
      let result = res.result;
      this.setState({
        mockData: result.list,
        Pagination: {
          current: result.page,
          pageSize: result.page_size,
          total: result.total_count,
          showTotal: () => {
            return `共${result.total_count}条`;
          },
          onChange: current => {
            this.getDataList(current);
          }
        }
      });
    });
  };

  // 单选
  onRowClick = (record, index) => {
    let selectKey = [index];

    Modal.info({
      title: '信息',
      content: `用户名：${record.username},地址${record.address}`
    });
    this.setState({
      selectedRowKeys: selectKey,
      selectedItem: record
    });
  };

  render() {
    let { mockData } = this.state;
    return (
      <Fragment>
        <Card title="基础表格" className="card-wrap">
          <Table
            dataSource={dataSource}
            columns={columns}
            bordered
            pagination={{
              position: 'top'
            }}
            size="small"
          />
        </Card>

        <Card title="Easy-Mock-Data" className="card-wrap">
          <Table
            dataSource={mockData}
            columns={mockColumns}
            bordered
            pagination={false}
            size="small"
          />
        </Card>

        <Card title="单选" className="card-wrap">
          <Table
            dataSource={mockData}
            columns={mockColumns}
            bordered
            pagination={false}
            size="small"
            rowSelection={{
              type: 'radio',
              selectedRowKeys: this.state.selectedRowKeys
            }}
            onRow={(record, index) => {
              return {
                onClick: () => {
                  this.onRowClick(record, index);
                }
              };
            }}
          />
        </Card>

        <Card title="复选" className="card-wrap">
          <Table
            dataSource={mockData}
            columns={mockColumns}
            bordered
            pagination={false}
            size="small"
            rowSelection={{
              type: 'checkbox',
              selectedCheckBoxRows: this.state.selectedCheckBoxRows,
              onChange: (selectedCheckBoxRows, selectedRows) => {
                console.log(selectedCheckBoxRows);
                console.log(selectedRows);
                this.setState({
                  selectedCheckBoxRows,
                  selectedRows
                });
              }
            }}
          />
        </Card>
        <Card title="分页" className="card-wrap">
          <Table
            dataSource={mockData}
            columns={mockColumns}
            bordered
            pagination={this.state.Pagination}
            size="small"
            rowSelection={{
              type: 'checkbox',
              selectedCheckBoxRows: this.state.selectedCheckBoxRows,
              onChange: (selectedCheckBoxRows, selectedRows) => {
                console.log(selectedCheckBoxRows);
                console.log(selectedRows);
                this.setState({
                  selectedCheckBoxRows,
                  selectedRows
                });
              }
            }}
          />
        </Card>
      </Fragment>
    );
  }
}
